<template>
    <div>
        <div class="copywritingNav">
            <div class="copywritingNav_content">
                <div class="copywritingNav_content_list" v-for="(item, index) in items" :key="index" :class="{active: item.active}">
                    <div class="content_list_title" @click="toggleActive(item)">
                        <div class="list_title_left"><span><img  :src="item.icon" /><img  :src="item.iconon" /></span>{{ item.title }}</div>
                        <div class="list_title_right"><i class="el-icon-arrow-down"></i></div>
                    </div>
                    <div class="content_list_down" v-show="item.active">
                        <a :href="listItem.link" v-for="(listItem, listIndex) in item.listData" :key="listIndex" class="list_down_li" :class="{active: listItem.active}" @click="toggleListItemActive(item, listIndex)">
                            <img :src="listItem.icon"/>
                            {{ listItem.title }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "integralNav",
        data() {
            return {
                items: [
                    {
                        title: '平台文案',
                        icon: require("@a/img/sv33.svg"),
                        iconon: require("@a/img/sv33on.svg"),
                        active: true,
                        listData: [
                            {
                                icon: require("@a/img/sv37.svg"),
                                title: '小红书笔记',
                                link: '#1',
                                active: true
                            },
                            {
                                icon: require("@a/img/sv37.svg"),
                                title: '小红书笔记',
                                link: '#2',
                                active: false
                            },
                            {
                                icon: require("@a/img/sv38.svg"),
                                title: '知乎',
                                link: '#3',
                                active: false
                            },
                            {
                                icon: require("@a/img/sv39.svg"),
                                title: '抖音视频文案',
                                link: '#4',
                                active: false
                            },
                            {
                                icon: require("@a/img/sv40.svg"),
                                title: '今日头条',
                                link: '#5',
                                active: false
                            },
                            {
                                icon: require("@a/img/sv41.svg"),
                                title: '公众号',
                                link: '#6',
                                active: false
                            },
                            {
                                icon: require("@a/img/sv42.svg"),
                                title: '大众点评',
                                link: '#7',
                                active: false
                            },
                        ]
                    },
                    {
                        title: '平台文案',
                        icon: require("@a/img/sv34.svg"),
                        iconon: require("@a/img/sv34on.svg"),
                        active: false
                    },
                    {
                        title: '平台文案',
                        icon: require("@a/img/sv35.svg"),
                        iconon: require("@a/img/sv35on.svg"),
                        active: false
                    },
                    {
                        title: '出海文案',
                        icon: require("@a/img/sv36.svg"),
                        iconon: require("@a/img/sv36on.svg"),
                        active: false
                    }
                ]
            };
        },
        methods:{
            toggleActive(item) {
                this.items.forEach(i => {
                    if (i !== item) {
                        i.active = false;
                    }
                });
                item.active = !item.active;
            },
            toggleListItemActive(item, listIndex) {
                item.listData.forEach((listItem, index) => {
                    if (index === listIndex) {
                        listItem.active = true;
                    } else {
                        listItem.active = false;
                    }
                });
            }
        },
    }
</script>

<style scoped>
    @import "copywritingNav.css";
</style>
